<template>
  <!-- 头部区域 -->
  <div class="header">
    <div class="container flexAlign">
      <!-- logo -->
      <div class="logo">
        <img src="../../assets/logo1.png" alt="">
      </div>
      <!-- 导航条 -->
      <div class="navs">
        <ul>
          <li><a href="#">HOME</a></li>
          <li><a href="#">SHOP</a></li>
          <li><a href="#">BLOG</a></li>
          <li><a href="#">PORTFOLIO</a></li>
          <li><a href="#">PAGE</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>
      <div class="navs-right">
        <!-- 登录 -->
        <div class="login navsicon">
          <i class="iconfont icon-weidenglu"></i>
          <a href="#" @click="login">{{$store.state.token ? `${userName}` : 'Login'}}</a>
        </div>
        <!-- 搜索 -->
        <div class="search navsicon">
          <i class="iconfont icon-sousuo1"></i>
        </div>
        <!-- 喜欢列表 -->
        <div class="like navsicon">
          <i class="el-icon-star-off" @click="starList"></i>
        </div>
        <!-- 购物车 -->
        <div class="shop navsicon">
          <i class="iconfont icon-gouwuchekong" @mouseover="showShop"></i>
          <span class="num">{{$store.state.myNumber}}</span>
          <!-- <span class="num">{{shopList.length}}</span> -->
          <div class="shop_cont">
            <div class="items">
              <div class="item" v-for="(item,index) in shopList" :key="index">
                <div class="item_img">
                  <img :src="item.image1" alt="">
                </div>
                <div class="item_text">
                  <h2>{{item.text}}</h2>
                  <h3>{{item.price}}</h3>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 分类 -->
        <div class="align navsicon">
          <i class="iconfont icon-align-right"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created () {
    this.userName = window.sessionStorage.getItem('userName')
    this.$store.commit('setNumber', window.sessionStorage.getItem('number'))
  },
  data () {
    return {
      shopList: [],
      userName: ''
    }
  },
  mounted () {
    const header = document.querySelector('.header')
    window.onscroll = function () {
      const scrollTop = document.documentElement.scrollTop
      if (scrollTop >= 200) {
        header.classList.add('headerFixed')
      } else {
        header.classList.remove('headerFixed')
      }
    }
  },
  methods: {
    login () {
      this.$router.push('./Login')
    },
    async showShop () {
      const { data: res } = await this.$http.get(`getmyshop?token=${this.$store.state.token}`, this.$store.state.userId)
      this.shopList = res.data
    },
    starList () {
      this.$router.push('/Star')
    }
  }
}
</script>

<style lang="less" scoped>
.header{
  width: 100%;
  padding: 0.6rem 0;
  transition: all 0.5s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}
.headerFixed{
  position: fixed;
  top: 0;
  left: 0;
  background-color: #ffffffc2;
  transition: all 0.8s;
  box-shadow: 0 3px 6px rgba(105, 105, 105, 0.1);
}
.logo{
  width: 12%;
  img{
    max-width: 3.75rem;
  }
}
.navs{
  width: 50%;
  ul{
    display: flex;
    li{
        padding: 0.15rem;
        margin-right: 0.46rem;
      a{
        position: relative;
        padding: 0.25rem 0;
        font-size: 0.44rem;
        color: #3b3b3b;
        font-weight: 600;
        transition: all 0.5s;
      }
    }
  }
}
.navs ul li a:hover{
  color: #eb2323;
}
.navs ul li a::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background-color: #eb2323;
  transition: 0.5s;
}
.navs ul li:hover a::after{
  width: 100%;
}
.navs-right{
  width: 30%;
  display: flex;
  justify-content: flex-end;
}
.navsicon{
  margin-left: 0.625rem;
  a{
    color: #3b3b3b;
  }
  i{
    cursor: pointer;
    font-size: 0.625rem;
  }
}
.shop{
  position: relative;
}
.shop_cont{
  position: absolute;
  padding: 0.6rem;
  top: 160%;
  left: -10rem;
  width: 11rem;
  background-color: #fff;
  transition: 0.5s;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 1px 10px rgba(0,0,0,0.1);
}
.shop:hover .shop_cont{
  top: 110%;
  opacity: 1;
  visibility: visible;
}
.items{
  display: flex;
  flex-direction: column;
  height: 10rem;
  overflow: auto;
  .item{
    display: flex;
    margin-bottom: 0.3rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #ccc;
    .item_img{
      width: 23%;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .item_text{
      width: 60%;
      position: relative;
      padding-left: 0.4rem;
      h2{
        font-size: 0.45rem;
        cursor: pointer;
        transition: 0.3s;
        color: #3b3b3b;
        font-weight: 500;
      }
      h3{
        font-size: 0.45rem;
        position: absolute;
        bottom: 10%;
        color: #666;
      }
    }
    .item_text h2:hover{
      color: #eb2323;
    }
  }
}
.price{
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0 0.4rem 0;
  h2{
    font-size: 0.6rem;
  }
  h3{
    font-size: 0.6rem;
    color: #212529;
    font-weight: 400;
  }
}
.items::-webkit-scrollbar {
  width: 4px;
}
.items::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: rgba(0,0,0,0.2);
}
.items::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 0;
  background: rgba(0,0,0,0.1);

}
.shop .num{
  position: absolute;
  font-size: 0.2rem;
  top: 10%;
  right: -45%;
  font-weight: bold;
}
@media screen and (max-width:992px){
  .navs,.navs-right .search, .navs-right .align{
    display: none;
  }
}
@media screen and (max-width:768px){
  .navsicon i{
    font-size: 1rem;
  }
  .shop .num{
    top: -7%;
    right: -76%;
  }
  .flexAlign{
    justify-content: space-around;
  }
}
</style>
